<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM查询</title>
</head>
<body>
    <button id="btn">按钮</button>
    <input type="text" class="text">

    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var btn =document.getElementById("btn");
        /* innerHTML用于获取元素内部的HTML代码
         *即两个标签之间的内容
        */
        console.log(btn.innerHTML);



      /* 如果需要读取元素节点属性，
		* 	直接使用 元素.属性名
		* 		例子：元素.id 元素.name 元素.value
		* 		注意：class属性不能采用这种方式，
		* 		读取class属性时需要使用 元素.className */

            var input=  document.getElementsByTagName("input")[0]
            console.log(input.className)

      /* childNodes属性会获取包括文本节点在呢的所有节点
	   * 根据DOM标签标签间空白也会当成文本节点
	   * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
		*/     


        /*
		 * children属性可以获取当前元素的所有子元素
		 */
            var ul =document.getElementById("myul");
            console.log(ul.childNodes);
            console.log(ul.children);

        //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
            console.log(ul.firstChild);
        //firstElementChild获取当前元素的第一个子元素    
            console.log(ul.firstElementChild);



    </script>
</body>
</html>